css3 斜切角/斜边的实现方式来自BAT大神的出品 |
您所在的位置：网站首页 › css 倾斜 › css3 斜切角/斜边的实现方式来自BAT大神的出品 |
|
设计图含有斜切角的效果时，我们一般想到的方法是切出四个角为背景，然后用border连起来，这样就能显示出该效果了，那么直接使用css呢？下面就整理css做斜边的效果。 1、方案一：利用linear-gradient .chamfer{ background: #3b3; background: linear-gradient(135deg, transparent 15px, #3b3 0) top left, linear-gradient(-135deg, transparent 15px, #3b3 0) top right, linear-gradient(-45deg, transparent 15px, #3b3 0) bottom right, linear-gradient(45deg, transparent 15px, #3b3 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; } 资源网站搜索大全https://55wd.com 2、方案二：利用clip-path .base{ width: 300px;height: 300px; } .chamfer{ background: #009EEB; clip-path: polygon( 20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px ); }css曲线切口角的实现 上面实现的2种切口是直线的，如何实现曲线切口角呢？下面就介绍利用radial-gradient实现曲线切口角： .chamfer{ background: #e72; background: radial-gradient(circle at top left, transparent 15px, #e72 0) top left, radial-gradient(circle at top right, transparent 15px, #e72 0) top right, radial-gradient(circle at bottom right, transparent 15px,#e72 0) bottom right, radial-gradient(circle at bottom left, transparent 15px, #e72 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; }使用Corner-shape 除了上面写的方法外，我们还可以使用插件Corner-shape来实现，Corner-shape这个插件很有意思，能够生成元素的角形状，比如圆角、反向圆角、矩形、直角的边角，使用SVG技术生成，使用上只需要设置预设的自定义属性，然后设置圆角边框的大小即可。 Corner-shape的使用链接：http://wenjiangs.com/wp-content/uploads/2017/06/corner-shape/ 例如： corner-shape:bevel; border-radius:10% / 30px; width:400px; height: 300px;
|
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |